<template>
  <div id="controler-container">
    <div class="swiper-controler">
      <span class="title">自动巡检</span>
      <span
        class="switch"
        :class="{ active: swiperStatus }"
        @click="$emit('changSwiperStatus', !swiperStatus)"
      >
        {{ swiperStatus ? "开" : "关" }}
      </span>
    </div>
    <div class="screen-controler">
      <button
        v-for="item in btns"
        :key="item.value"
        @click="$emit('changeShow', item.value)"
        :class="{ active: currentShow === item.value }"
      >
        {{ item.label }}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'controler',
  props: {
    swiperStatus: {
      type: Boolean,
      required: true
    },
    currentShow: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      btns: [
        { label: 1, value: 1 },
        { label: 6, value: 9 },
        { label: 8, value: 16 },
        { label: 16, value: 25 },
        { label: 27, value: 36 }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
#controler-container {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;

  .swiper-controler {
    width: 240px;
    height: 80px;
    position: relative;
    .title {
      position: absolute;
      font-size: 32px;
      top: 17px;
    }
    .switch {
      position: relative;
      left: 150px;
      display: inline-block;
      padding-left: 10px;
      box-sizing: border-box;
      margin-top: 10px;
      width: 130px;
      height: 62px;
      background: #fff;
      line-height: 60px;
      border-radius: 35px;
      text-align: center;
      transition: 0.2s;
      color: black;
      cursor: pointer;
      &::after {
        display: block;
        width: 30px;
        height: 30px;
        position: absolute;
        content: "";
        background: rgb(215, 215, 215);
        border-radius: 50%;
        top: 15px;
        left: 10px;
        transition: 0.2s;
      }
      &.active {
        background: rgb(49, 150, 250);
        color: #fff;
        &::after {
          left: 90px;
        }
      }
    }
  }
  .screen-controler {
    position: relative;
    button {
      background: rgb(2, 72, 142);
      border: 0;
      margin-left: 25px;
      color: rgb(204, 204, 204);
      cursor: pointer;
      width: 150px;
      height: 80px;
      display: inline-block;
      border-radius: 15px;
      font-size: 32px;

      &.active {
        color: #fff;
        background-color: rgb(49, 150, 250);
      }
    }
  }
}
</style>
